﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.TextTemplates.IndexModel
@await Component.InvokeAsync("MonacoEditorWidget")
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "文本模板";
}
<link href="~/codemirror/lib/codemirror.css" rel="stylesheet" />
<script src="~/codemirror/lib/codemirror.js"></script>
<script src="~/codemirror/mode/clike/clike.js"></script>
<script src="~/codemirror/mode/javascript/javascript.js"></script>
@section scripts
{
    <abp-script src="/Pages/TextTemplates/Index.cshtml.js"></abp-script>
    
}
@section styles
{
    <abp-style src="/Pages/TextTemplates/Index.css"></abp-style>
   
}
<div class="content-container">
    <div id="app">
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="showCreate" icon="el-icon-plus" size="mini" v-if="createPermission">新建</el-button>
                    <el-select size="mini" v-model="filterType" placeholder="请选择" clearable>
                        <el-option v-for="item in typeOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model.trim="filterName" placeholder="模板名称" size="mini" style="width:300px;margin-left:10px" clearable></el-input>
                    <el-button type="primary" v-on:click="loadTableData" icon="el-icon-search" size="mini" style="margin-left:10px;">搜索</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="loadTableData" icon="el-icon-refresh" size="mini"></el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="table-container">
                <el-table :data="tableData" height="500" class="el-table" ref="textTemplateTable" size="mini" >
                    <el-table-column type="index" label="编号">

                    </el-table-column>
                    <el-table-column label="名称" property="name">
                        
                    </el-table-column>
                    <el-table-column label="类型" property="type">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type===0" style="color:#409EFF">在线服务</span>
                            <span v-else-if="scope.row.type==1" style="color:#67C23A">Json</span>
                            <span v-else>文本</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="接口名" >
                        <template slot-scope="scope">
                            <span style="color:#409EFF" v-if="scope.row.type===0">{{scope.row.interface}}</span>
                            <span  v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类名(全路径)" width="400">
                        <template slot-scope="scope">
                            <span style="color:#409EFF" v-if="scope.row.type===0">{{scope.row.typeName}}</span>
                            <span  v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="活动">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive"
                                       disabled>
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" v-if="editPermission" v-on:click="showEdit(scope.$index, scope.row)"></el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" v-on:click="deleteTextTemplate(scope.row.id)" v-if="deletePermission"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 新建和编辑-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" v-on:close="resetForm" :close-on-click-modal="false" fullscreen>
            <el-form :model="textTemplate" :label-width="formLabelWidth" ref="textTemplateForm" :rules="rules">
                <el-row>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model.trim="textTemplate.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="类型">
                                <el-select size="mini" v-model="textTemplate.type" placeholder="请选择">
                                    <el-option v-for="item in typeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="textTemplate.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="textTemplate.type===0">
                    <el-col :span="6">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="接口" prop="interface">
                                <el-input v-model.trim="textTemplate.interface" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="类名" prop="typeName">
                                <el-input v-model.trim="textTemplate.typeName" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                   
                </el-row>
                <el-row >
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="内容">
                                <code-mirror v-model="textTemplate.content" :mode="language"></code-mirror>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="save" size="mini">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>
